<template>
  <div class="home">
    <Phead />
    <!-- 轮播图 -->
    <div class="banner2">
        <div class="swiper-container swiper-container1">
            <div class="swiper-wrapper">
                <div class="swiper-slide" @click="toAbout"><img src="@/assets/img/banner1.jpg" alt="" /></div>
                <div class="swiper-slide" @click="toAbout"><img src="@/assets/img/banner2.jpg" alt="" /></div>
                <div class="swiper-slide" @click="toAbout"><img src="@/assets/img/banner3.jpg" alt="" /></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- 业务范围 -->
    <div class="business">
        <div class="title">
            <h2>业务范围</h2>
            <h3>SCOPE OF BUSINESS</h3>
            <img src="@/assets/img/border-bottom2.png" alt="">
        </div>
        <ul class="w clearfix business-list stamp">
            <li @click="toTypeBidList" data-id="10">
                <div class="line">
                    <div class="border">
                        <img src="@/assets/img/business1.png" alt="">
                    </div>
                </div>
                <p class="business-text">医用耗材</p>
            </li>
            <li @click="toTypeBidList" data-id="20">
                <div class="line">
                    <div class="border">
                        <img src="@/assets/img/business2.png" alt="">
                    </div>
                </div>
                <p class="business-text">医疗设备</p>
            </li>
            <li @click="toTypeBidList" data-id="30">
                <div class="line">
                    <div class="border">
                        <img src="@/assets/img/business3.png" alt="">
                    </div>
                </div>
                <p class="business-text">外科器械</p>
            </li>
            <li @click="toTypeBidList" data-id="40">
                <div class="line">
                    <div class="border">
                        <img src="@/assets/img/business4.png" alt="">
                    </div>
                </div>
                <p class="business-text">康复护理</p>
            </li>
            <li @click="toTypeBidList" data-id="50">
                <div class="line">
                    <div class="border">
                        <img src="@/assets/img/business5.png" alt="">
                    </div>
                </div>
                <p class="business-text">宠物用品</p>
            </li>
            <li @click="toTypeBidList" data-id="60">
                <div class="line">
                    <div class="border">
                        <img src="@/assets/img/business6.png" alt="">
                    </div>
                </div>
                <p class="business-text">医院其他</p>
            </li>
        </ul>

    </div>
    <!-- 招标中心 -->
    <div class="bidding w">
        <div class="title">
            <h2>招标中心</h2>
            <h3>BIDDING CENTER</h3>
            <img src="@/assets/img/border-bottom2.png" alt="">
        </div>
        <div class="bidding-top clearfix">
            <ul class="clearfix">
                <li>
                    <div class="border fl">
                        <img src="@/assets/img/bidding1.png" alt="">
                    </div>
                    <h2>招标中</h2>
                    <h3>{{total[1]}}</h3>
                </li>
                <li>
                    <div class="border fl">
                        <img src="@/assets/img/bidding2.png" alt="">
                    </div>
                    <h2>已完成</h2>
                    <h3>{{total[0]}}</h3>
                </li>
                <li>
                    <div class="border fl">
                        <img src="@/assets/img/bidding3.png" alt="">
                    </div>
                    <h2>供应商数量</h2>
                    <h3>{{total[2]}}</h3>
                </li>
            </ul>
        </div>
        <!-- 招标中导航 -->
        <div class="bidding-list">
            <ul>
                <li :class="tab == 20?'active':''" @click="tabChange" data-tab="20">招标中</li>
                <li :class="tab == 70?'active':''" @click="tabChange" data-tab="70">已成交</li>
                <li :class="tab == 100?'active':''" @click="tabChange" data-tab="100">已报名</li>
            </ul>
            <router-link to="/bid/pushbid" >
               <button class="quick">快速招标</button>
             </router-link>
            <!-- <div class="search">
                <input type="text" placeholder="请输入您要搜索的项目关键字">
                <button>搜索</button>
                <img src="@/assets/img/search.png" alt="">
            </div> -->
        </div>
        <div class="content">
            <!-- 招标中内容 -->
            <ul class="ul1" v-if="tab == 20">
                <li  v-for="(val,index) in bidBeing">
                    <div  :data-bidid="val.bid_id" @click="toDetail">
                        <span>({{val.bid_type}})</span>
                        <em>{{val.bid_name}}</em>

                        <button @click.stop="enrollBid" :data-bidid="val.bid_id" :data-id="index" v-if="!val.is_enlist" type="button" class="btn">
                          立即报名
                        </button>
                        <button type="button" class="whitebtn" v-else>
                          已报名
                        </button>

                        <i class="fr">
                        <em></em>{{val.city_id}}</i>
                        <h4>
                          {{val.bid_remark}}
                        </h4>

                        <tbody>
                            <table>
                                <tr>
                                    <td class="green">
                                      {{val.countDown}}
                                      
                                    </td>
                                    <td><em>{{val.bid_user_company}}</em></td>
                                    <td><em>{{val.bid_enlist_num}}人</em></td>
                                    <td><em>{{val.time}}</em></td>
                                </tr>
                                <tr>
                                    <td>报名倒计时</td>
                                    <td>发布者</td>
                                    <td>竞标</td>
                                    <td>日期</td>
                                </tr>
                            </table>
                        </tbody>
                    </div>
                </li>
                
            </ul>
            <!-- 已成交内容 -->
            <ul class="ul2" v-if="tab == 70">
                <li  v-for="(val,index) in bidDone">
                    <a href="#" :data-bidid="val.bid_id" @click="toDetail">
                        <span>({{val.bid_type}})</span>
                        <em>{{val.bid_name}}</em>

                        <i class="fr">
                        <em></em>{{val.city_id}}</i>
                        <h4>
                          {{val.bid_remark}}
                        </h4>
                        <tbody>
                            <table>
                                <tr>
                                    <td class="green"><span>￥{{val.pick_price}}</span></td>
                                    <td><em>{{val.bid_user_company}}</em></td>
                                    <td><em>{{val.time}}</em></td>
                                    <td><em>{{val.bid_enlist_num}}人</em></td>
                                </tr>
                                <tr>
                                    <td>完成价格</td>
                                    <td>发布者</td>
                                    <td>日期</td>
                                    <td>竞标</td>
                                </tr>
                            </table>
                        </tbody>
                    </a>
                </li>
                
            </ul>
            <!-- 以报名内容 -->
            <ul class="ul3" v-if="tab == 100">
                <li   v-for="(val,index) in bidColl">
                    <a href="#" :data-bidid="val.bid_id" @click="toDetail">
                        <span>({{val.bid_type}})</span>
                        <em>{{val.bid_name}}</em>

                        <button class="whitebtn">已报名</button>
                        <i class="fr">
                        <em></em>{{val.city_id}}</i>
                        <h4>
                          {{val.bid_remark}}
                        </h4>
                        <tbody>
                            <table>
                                <tr>
                                    <td class="green"><span>{{val.bid_start_time}}</span></td>

                                    <td><em>{{val.bid_user_company}}</em></td>

                                    <td><em>{{val.bid_enlist_num}}人</em></td>
                                </tr>
                                <tr>
                                    <td>开始时间</td>
                                    <td>发布者</td>

                                    <td>竞标</td>
                                </tr>
                            </table>
                        </tbody>
                    </a>
                </li>
            </ul>    
        </div>

        <p class="more">
          <router-link to="/bid/bidcenter" >
             查看更多<i></i>
          </router-link>
        </p>
    </div>
    <!-- 弹窗 -->
    <Pdailog :is-show="dailogShow" @on-close="closeDialog" >
         <div slot="main">{{dailogText}}</div>
    </Pdailog>

    <Pfoot />
  </div>
</template>

<script>
// @ is an alias to /src
import Phead from '@/components/Phead.vue'
import Pfoot from '@/components/Pfoot.vue'
import Swiper from 'swiper';
import Pdailog from '@/components/Pdailog.vue'

export default {
  name: 'home',
  data(){
    return{
        banner: [],//轮播图片路径
        //以上 轮播数据
        ad:'',//广告语
        notice: [],//公告轮播数据
        total:[],//统计

        tab:20,//tab 20 招标中 70已完成，100 已收藏
        tabIndex: 1,
        bidBeing: {},//已发布
        bidDone: {},//已完成
        bidColl: {},//收藏的
        bidBeingPage:1,
        bidDonePage:1,
        bidCollPage:1,
        userInfo:'',
        listData:[],
        downTime:'',//倒计时

        dailogShow:false,
        dailogText:''
       

     }
  },
  methods:{
    //报名
   async enrollBid(e){  
        let bidId = e.currentTarget.getAttribute('data-bidid')
        let id = e.currentTarget.getAttribute('data-id')
        let arr = this.bidBeing;
        //tab 20 招标中 70已完成，100 已收藏
        let re = await this.$axios.post('bid/enrollBid',{
            bid_id:bidId
        });


         if(re.code == 200){
               this.dailogShow = true
               this.dailogText = '报名成功'
               
              //改变报名按钮
              arr[id].is_enlist = 1;
              this.bidBeing = arr
            //未认证
            }else if(re.code == 201){
              this.$router.push({path:'/register/status'})
            }else{

               this.dailogShow = true
               this.dailogText = re.msg
                
            }
    },
    //tab 切换
    async tabChange(e){
      let  tab = e.currentTarget.getAttribute('data-tab')
      this.tab = tab;

     //获取数据
      let user_token = this.getUserToken()
      let res = await this.$axios.post('index/tabBidList',{
        tab:tab,
        user_token:user_token
      })
      if(res.code == 200){
          if(this.tab == 20){
               this.bidBeing = res.data.data
               this.bidBeingPage = res.data.page
          }else if(tab ==70){
               this.bidDone = res.data.data
               this.bidDonePage = res.data.page
          }else if(tab ==100){
               this.bidColl = res.data.data
               this.bidCollPage = res.data.page
          }
       }
       
    },
    //倒计时
   setCountDown(){
    let that =this
    let time = 1000;
    let lts = this.bidBeing;
         this.downTime = setInterval(function(){
          let list = lts.map(function (v, i){
            if (v.time1 <= 0) {
              v.time1 = 0;
            }
           let formatTime = that.getFormat(v.time1);
            v.time1 -= time;
            v.countDown = `${formatTime.hh}时${formatTime.mm}分${formatTime.ss}秒`;
            return v;

          })
            that.bidBeing = list

       }, time)
    },
   //单类型 标书列表
   toTypeBidList(e){
      let  bidtype = e.currentTarget.getAttribute('data-id')
      this.$router.push({path:'/bid/typebidlist',query: {
            bidtype: bidtype
          }})
   },
  //标书详情
  async toDetail(e){
    let that =this;
    let bidid = e.currentTarget.getAttribute('data-bidid')
    //let  tabnum  =  e.currentTarget.dataset.tabnum;
    let user_token = this.getUserToken()
    let res = await this.$axios.post('bid/getGoWhere',{
        bid_id:bidid,
        user_token:user_token
      })
        if(res.code == 200){
            this.$router.push({path:'/bid/'+res.data.toWhere,query: {
            bid_id: bidid,
            redirect:'/'
           }})
        }
        
   },
   //到公告列表
   toNotice(){
        this.$router.push({path:'/my/notice'})
   },
   //关于我们
   toAbout(){
        this.$router.push({path:'/about'})
   },
   //关闭弹窗
   closeDialog(){
        this.dailogShow=false;
   },
   //确认按钮
   confirmDialog(){
        this.dailogShow=false;
   }

  },

  async created(){
    let user_token =this.getUserToken()
    let res = await this.$axios.post('/index/indexdata',{
        user_token:user_token
    })
    if(res.code == 200){ 
           this.banner = res.data.banner,
           this.ad = res.data.ad,
           this.notice = res.data.notice,
           this.total = res.data.total,
           this.bidBeing =  res.data.bidBeing.data,
           this.bidBeingPage = res.data.bidBeing.page
           localStorage.setItem('notice',JSON.stringify(this.notice))

        this.setCountDown();

    }
  },
  beforeRouteLeave(to,from,next){
    clearInterval(this.downTime);
    next()
  },
  mounted(){

     let that = this;
  　　that.$nextTick(function(){
  　　　　  new Swiper('.swiper-container2', {
                pagination: '.pagination',
                speed: 1000,
                loop: true,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                direction: 'vertical',
           })
           new Swiper('.swiper-container1', {
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                loop: true,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },

            });
  　　})


  },

  components: {
    Phead,
    Pfoot,
    Pdailog
  }
}
</script>
